<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<script src="checkList.js"></script>
		<script src="../2_jsFunction/define.js"></script>
	</head>
	<body>

		<h1>我的 Web 页面</h1>
		<p id="demo">一个段落。</p>
		<button type="button" onclick="myFunction1()">点击这里</button>
		<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
		<script src="myScript.js"></script>

		<!--输出到弹窗-->
		<script>
			window.alert("alert:" + "window");
		</script>

		<!--操作html元素-->
		<script>
			document.getElementById("demo").innerHTML = "段落已修改。";
		</script>

		<!--输出到html文档-->
		<script>
			document.write(Date());
		</script>
		<p id="demo2">----------------</p>
		<button type="button" onclick="myFunction2()">点击这里覆盖页面</button>
		<script src="myScript.js"></script>

		<!--输出到控制台-->
		<script>
			a = 5;
			b = 6;
			c = a + b;
			console.log("a + b = " + c);
			console.log(c);
		</script>

		<p id="demo3">一个段落。</p>
		<div id="myDIV">一个 DIV。</div>
		<script>
			document.getElementById("demo").innerHTML="你好 Dolly";
			document.getElementById("myDIV").innerHTML="你最近怎么样?";
		</script>

		<p id="demo4">输出Function4。</p>
		<script>
			function myFunction4(a,b){
				return a*b;
			}
			document.getElementById("demo4").innerHTML=myFunction4(4,3);
		</script>

		<!--在 HTML 中, 所有全局变量都会成为 window 变量。-->
		<p id="demo5"></p>
		<script>
			myFunction();
			document.getElementById("demo5").innerHTML =
			"我可以显示 " + window.carName;
			function myFunction()
			{
				carName = "Volvo";
			}
		</script>

		<!--
		   -HTML 事件的实例：
		   -   HTML 页面完成加载
		   -   HTML input 字段改变时
		   -   HTML 按钮被点击
		   -<some-HTML-element some-event="JavaScript 代码">
		   -->
		<button onclick="getElementById('demo6').innerHTML=Date()">现在时间是？</button>
		<p id="demo6"></p>
		<button onclick="this.innerHTML=Date()">现在的时间是?</button>
		<button onclick="displayDate()">现在的时间是?</button>
		<script>
			function displayDate(){
				document.getElementById("demo7").innerHTML=Date();
			}
		</script>
		<p id="demo7"></p>

		<script type="text/Javascript">
			var d = new Date();
			var time = d.getHours();
			if (time<10)
			{
				document.write("<b>早上好</b>");
			}
			else if (time>=10 && time<20)
			{
				document.write("<b>今天好</b>");
			}
			else
			{
				document.write("<b>晚上好!</b>");
			}
		</script>

		<button onclick="this.innerHTML=myFunctionS()">到周末了吗？</button>
		<p id="demoS"></p>
		<script>
			function myFunctionS()
			{
				var x;
				var d=new Date().getDay();
				switch (d)
				{
					case 6:x="今天是星期六";
						break;
					case 0:x="今天是星期日";
						break;
					default:
						x="期待周末";
				}
				return x;
			}
		</script>

		<script>
			var txt="";
			function message(){
				try {
					adddlert("Weblcome guest!");
				}
				catch(err) {
					txt="本页有一个错误。\n\n";
					txt+="错误描述：" + err.message + "\n\n";
					txt+="点击确定继续。\n\n";
					alert(txt);
				}
			}
		</script>
		<input type=body"button" value="查看消息" onclick="message()" />

		<form name="myForm" action="demo_form.php"
			onsubmit="return validateForm()" method="post">
			名字: <input type="text" name="fname">
			<input type="submit" value="提交">
		</form>

		<p>请输入 1 到 10 之间的数字：</p>
		<input id="numb">
		<button type="button" onclick="checkNum()">提交</button>
		<p id="checkdemo"></p>

		<!--html表单自动验证-->
		<form action="demo_form.php" method="post">
			<input type="text" name="fname" required="required">
			<input type="submit" value="提交">
		</form>

		<!--约束验证-->
		<input id="id1" type="number" min="100" max="300" required>
		<button onclick="myFunction()">验证</button>
		<p id="demoV"></p>

		<h2>JavaScript <b>this</b> 关键字</h2>
		<button onclick="this.style.display='none'">点我后我就消失了</button>

		<p>函数存储在变量后，变量可作为函数使用：</p>
		<p id="demoF"></p>
		<script>
			document.getElementById("demoF").innerHTML = x(4, 3);
		</script>
	</body>
</html>
